<template>
	<view class="pl20r pr20r pb20r">
		<view class="disFlex aliItCenter h100r borB1SE8e8e8">
			<view class="w160r teAliRight borR1SE8e8e8">
				房间名称：
			</view>
			<view class="flex1 pl20r">
				<input type="text" placeholder="请输入房间名称"
					class="f26r h60r" v-model="newObj.name"
				>
			</view>
		</view>
		<view class="disFlex aliItCenter h100r borB1SE8e8e8">
			<view class="w160r teAliRight borR1SE8e8e8">
				起订时长：
			</view>
			<view class="flex1 pl20r">
				<input type="digit" placeholder="请输入起订时长"
					class="f26r h60r" v-model="newObj.hour"
				>
			</view>
		</view>
		<view class="disFlex aliItCenter h100r borB1SE8e8e8">
			<view class="w160r teAliRight borR1SE8e8e8">
				适用人数：
			</view>
			<view class="flex1 pl20r">
				<input type="number" placeholder="请输入适用人数"
					class="f26r h60r" v-model="newObj.people_count"
				>
			</view>
		</view>
		<view class="disFlex aliItCenter h100r borB1SE8e8e8">
			<view class="w160r teAliRight borR1SE8e8e8">
				原价：
			</view>
			<view class="flex1 pl20r">
				<input type="digit" placeholder="请输入原价¥/小时"
					class="f26r h60r" v-model="newObj.price"
				>
			</view>
		</view>
		<!-- <view class="disFlex aliItCenter h100r borB1SE8e8e8">
			<view class="w160r teAliRight borR1SE8e8e8">
				VIP价格：
			</view>
			<view class="flex1 pl20r">
				<input type="digit" placeholder="请输入VIP价格¥/小时"
					class="f26r h60r" v-model="newObj.vip_price"
				>
			</view>
		</view> -->
		<view class="disFlex aliItCenter h100r borB1SE8e8e8">
			<view class="w160r teAliRight borR1SE8e8e8">
				必购套餐：
			</view>
			<view class="flex1 pl20r">
				<radio-group @change="radioChange1">
					<label v-for="item in radioAry1" :key="item.value"
						class="wPer50 disInBlo teAliCenter"
					>
						<radio :value="item.value"
							:checked="item.value === newObj.set_meal_type"
							color="#64aeb4" style="transform: scale(0.8)"
						 />
						{{item.radioText}}
					</label>
				</radio-group>
			</view>
		</view>
		<view class="disFlex aliItCenter h100r borB1SE8e8e8">
			<view class="w160r teAliRight borR1SE8e8e8">
				开放/关闭：
			</view>
			<view class="flex1 pl20r">
				<radio-group @change="radioChange2">
					<label v-for="item in radioAry2" :key="item.value"
						class="wPer50 disInBlo teAliCenter"
					>
						<radio :value="item.value"
							:checked="item.value === newObj.type"
							color="#64aeb4" style="transform: scale(0.8)"
						 />
						{{item.radioText}}
					</label>
				</radio-group>
			</view>
		</view>
		<view class="disFlex aliItCenter h100r borB1SE8e8e8">
			<view class="w160r teAliRight borR1SE8e8e8">
				排序：
			</view>
			<view class="flex1 pl20r">
				<input type="number" placeholder="请输入排序(数字)"
					class="f26r h60r" v-model="newObj.sort"
				>
			</view>
		</view>
		<view class="disFlex aliItCenter h100r borB1SE8e8e8">
			<view class="w160r teAliRight borR1SE8e8e8">
				房间标签：
			</view>
			<view class="flex1 pl20r">
				<input type="text" placeholder="请输入(标签1,标签2-英文逗号)"
					class="f26r h60r" v-model="newObj.labels"
				>
			</view>
		</view>
		<view class="disFlex aliItCenter h100r borB1SE8e8e8">
			<view class="w160r teAliRight borR1SE8e8e8">
				WiFi：
			</view>
			<view class="flex1 pl20r">
				<input type="text" placeholder="请输入(WiFi名称,密码-英文逗号)"
					class="f26r h60r" v-model="newObj.wifi"
				>
			</view>
		</view>
		<view class="disFlex aliItCenter h100r borB1SE8e8e8">
			<view class="w160r teAliRight borR1SE8e8e8">
				门锁key：
			</view>
			<view class="flex1 pl20r">
				<input type="text" placeholder="请输入门锁key"
					class="f26r h60r" v-model="newObj.door_key"
				>
			</view>
		</view>
		<view class="disFlex aliItCenter h100r borB1SE8e8e8">
			<view class="w160r teAliRight borR1SE8e8e8">
				开关key：
			</view>
			<view class="flex1 pl20r">
				<input type="text" placeholder="请输入开关key"
					class="f26r h60r" v-model="newObj.switch_key"
				>
			</view>
		</view>
		<view class="disFlex aliItCenter h100r borB1SE8e8e8">
			<view class="w160r teAliRight borR1SE8e8e8">
				音响key：
			</view>
			<view class="flex1 pl20r">
				<input type="text" placeholder="请输入音响key"
					class="f26r h60r" v-model="newObj.music_key"
				>
			</view>
		</view>
		<view class="disFlex aliItCenter h100r borB1SE8e8e8">
			<view class="w160r teAliRight borR1SE8e8e8">
				到点提示音：
			</view>
			<view class="flex1 pl20r">
				<input type="text" placeholder="请输入到点提示音"
					class="f26r h60r" v-model="newObj.music_text"
				>
			</view>
		</view>
		<view class="borB1SE8e8e8">
			<view class="disFlex aliItCenter h100r">
				<view class="w160r teAliRight borR1SE8e8e8">
					轮播图：
				</view>
				<view class="flex1">
					（最多选择9张图片）
				</view>
			</view>
			<view class="p20r">
				<uni-file-picker v-model="imageValue" limit="9" @delete="fileDel1"
					@select="fileSelect1"
				></uni-file-picker>
			</view>
		</view>
		<view class="borB1SE8e8e8">
			<view class="disFlex aliItCenter h100r">
				<view class="w160r teAliRight borR1SE8e8e8">
					房间介绍：
				</view>
			</view>
			<!-- <view class="flex1 pl20r">
				<input type="text" placeholder="请输入房间介绍"
					class="f26r h60r" v-model="newObj.remarks"
				>
			</view> -->
			<editor1 :editorDetail="newObj.remarks"  @getContents="getContents"
			></editor1>
		</view>
		<view class="disFlex aliItCenter borB1SE8e8e8">
			<view class="w160r teAliRight borR1SE8e8e8">
				温馨提示：
			</view>
			<view class="flex1 p20r">
				<textarea
					placeholder="支付订单页的温馨提示 (英文'|'分隔换行) 如:1.第一行文字|2.第二行文字|3.第三行文字"
					class="f26r backColWhite wPer100 p20r boSiBorBox" v-model="newObj.marked_words"
				></textarea>
			</view>
		</view>
		<button class="colFff lh70r mt40r f26r backCol64aeb4"
			@click="cliSubBtn"
		>
			提交
		</button>
	</view>
</template>
<script>
import { inquiryToLogin, pathToBase64 } from '@/utils/utils.js'
import { addRoom, updateTeaRoomInfo, apiUploadBase64Pic } from '@/utils/api.js'
import editor1 from '@/components/editor/editor.vue'
import { baseUrl } from '@/utils/request'
export default {
	components: { editor1 },
	data() {
		return {
			baseUrl,
			optionType: '',
			optionRoomData: {},
			radioAry1: [
				{value: '1', radioText: '是'},
				{value: '2', radioText: '否'}
			],
			radioAry2: [
				{value: '1', radioText: '房间开放'},
				{value: '2', radioText: '房间关闭'}
			],
			imageValue: [],
			newObj: {
				token: '',
				name: '',//房间名称
				hour: '',//0.5
				people_count: '',//1
				vip_price: '',//2.00
				price: '',//1.00
				labels: '',//标签1,标签2
				wifi: '',//wifiName,12345678
				remarks: '',//这是房间介绍
				set_meal_type: '2',//2
				type: '1',//1
				sort: 0,//0
				door_key: '',
				switch_key: '',
				music_key: '',
				music_text: '',
				pic: '',
				marked_words: ''
			},
		}
	},
	onLoad(options) {
		this.optionType = options.type;
		if(options.type == 1) {
			uni.setNavigationBarTitle({ title: '新增房间' });
		}else if(options.type == 2) {
			uni.setNavigationBarTitle({ title: '修改房间' });
			// this.optionRoomData = JSON.parse(options.roomData);
			this.optionRoomData = uni.getStorageSync('addRoomDetail');
			uni.removeStorageSync('addRoomDetail');
			this.newObj.rid = this.optionRoomData.id;
			this.newObj.name = this.optionRoomData.name;
			this.newObj.hour = this.optionRoomData.hour;
			this.newObj.people_count = this.optionRoomData.people_count;
			this.newObj.vip_price = this.optionRoomData.vip_price;
			this.newObj.type = this.optionRoomData.type;
			this.newObj.sort = this.optionRoomData.sort;
			this.newObj.price = this.optionRoomData.price;
			this.newObj.labels = this.optionRoomData.labels;
			this.newObj.wifi = this.optionRoomData.wifi;
			this.newObj.door_key = this.optionRoomData.door_key;
			this.newObj.switch_key = this.optionRoomData.switch_key;
			this.newObj.music_key = this.optionRoomData.music_key;
			this.newObj.music_text = this.optionRoomData.music_text;
			this.newObj.remarks = this.optionRoomData.remarks;
			this.newObj.set_meal_type = this.optionRoomData.set_meal_type;
			this.newObj.pic = this.optionRoomData.pic;
			if(this.newObj.pic && this.newObj.pic != '') {
				this.newObj.pic.split(',').forEach(item => {
					this.imageValue.push({
						name: item,
						extname: "png",
						url: baseUrl + item
					})
				})
				console.log('baseUrl2', this.imageValue)
			}
			this.newObj.marked_words = this.optionRoomData.marked_words;
		} 
	},
	onShow() {
		inquiryToLogin().then(res => {
			this.newObj.token = res;
		});
	},
	methods: {
		radioChange1: function(evt) {
			for (let i = 0; i < this.radioAry1.length; i++) {
				if (this.radioAry1[i].value === evt.detail.value) {
					this.newObj.set_meal_type = this.radioAry1[i].value;
					break;
				}
			}
		},
		radioChange2(evt) {
			this.newObj.type = evt.detail.value;
		},
		fileSelect1(eee) {
			pathToBase64(eee.tempFilePaths[0]).then(res1 => {
				apiUploadBase64Pic({
					token: this.newObj.token, base64: res1
				}).then(res2 => {
					let newAry = [];
					if(this.newObj.pic && this.newObj.pic != '') {
						newAry = this.newObj.pic.split(',');
					}
					newAry.push(res2.data);
					this.newObj.pic = newAry.join();
					console.log('this.newObj', this.newObj)
				})
			})
		},
		fileDel1(eee) {
			let newAry = this.newObj.pic.split(',');
			newAry.forEach((item, index) => {
				if(item == eee.tempFile.name) {
					newAry.splice(index, 1)
				}
			})
			this.newObj.pic = newAry.join();
		},
		cliSubBtn() {
			console.log('this.newObj.pic', this.newObj.pic)
			if(!this.newObj.name) return uni.showToast({ title: '请输入房间名称', icon: 'none' })
			if(!this.newObj.hour) return uni.showToast({ title: '请输入起订时长', icon: 'none' })
			if(!this.newObj.people_count) return uni.showToast({ title: '请输入适用人数', icon: 'none' })
			if(!this.newObj.price) return uni.showToast({ title: '请输入正常价格¥/(小时)', icon: 'none' })
			// if(!this.newObj.vip_price) return uni.showToast({ title: '请输入VIP价格¥/(小时)', icon: 'none' })
			this.newObj.vip_price = this.newObj.price;
			if(this.newObj.sort === '') return uni.showToast({ title: '请输入排序', icon: 'none' })
			if(!this.newObj.labels) return uni.showToast({ title: '请输入房间标签', icon: 'none' })
			if(!this.newObj.wifi) return uni.showToast({ title: '请输入WIFI名称,密码', icon: 'none' })
			if(!this.newObj.pic) return uni.showToast({ title: '请上传至少1张轮播图', icon: 'none' })
			if(!this.newObj.remarks) return uni.showToast({ title: '请输入房间介绍', icon: 'none' })
			if(this.optionType == 1) {
				addRoom(this.newObj).then(res1 => {
					// this.newObj.name = '';
					// this.newObj.hour = '';
					// this.newObj.people_count = '';
					// this.newObj.price = '';
					// this.newObj.vip_price = '';
					// this.newObj.sort = '';
					// this.newObj.labels = '';
					// this.newObj.wifi = '';
					// this.newObj.remarks = '';
					uni.showModal({
						title: '提示', content: '新增房间成功', confirmColor: '#99c043',
						showCancel: false, confirmText: '返回房间列表',
						success:res2 => {
							if (res2.confirm) {
								// uni.reLaunch({ url: '/pages/index/roomList' })
								uni.navigateBack({ delta: 1 });
							}
						}
					})
				})
			}else if(this.optionType == 2) {
				let postData = {};
				if(this.newObj.name != this.optionRoomData.name) postData.name = this.newObj.name;
				if(this.newObj.hour != this.optionRoomData.hour) postData.hour = this.newObj.hour;
				if(this.newObj.people_count != this.optionRoomData.people_count) postData.people_count = this.newObj.people_count;
				if(this.newObj.type != this.optionRoomData.type) postData.type = this.newObj.type;
				if(this.newObj.sort !== this.optionRoomData.sort) postData.sort = this.newObj.sort;
				if(this.newObj.price != this.optionRoomData.price) {
					postData.price = this.newObj.price;
					postData.vip_price = this.newObj.price;
				}
				// if(this.newObj.vip_price != this.optionRoomData.vip_price) postData.vip_price = this.newObj.vip_price;
				if(this.newObj.labels != this.optionRoomData.labels) postData.labels = this.newObj.labels;
				if(this.newObj.wifi != this.optionRoomData.wifi) postData.wifi = this.newObj.wifi;
				if(this.newObj.door_key != this.optionRoomData.door_key) postData.door_key = this.newObj.door_key;
				if(this.newObj.switch_key != this.optionRoomData.switch_key) postData.switch_key = this.newObj.switch_key;
				if(this.newObj.music_key != this.optionRoomData.music_key) postData.music_key = this.newObj.music_key;
				if(this.newObj.music_text != this.optionRoomData.music_text) postData.music_text = this.newObj.music_text;
				if(this.newObj.remarks != this.optionRoomData.remarks) postData.remarks = this.newObj.remarks;
				if(this.newObj.set_meal_type != this.optionRoomData.set_meal_type) postData.set_meal_type = this.newObj.set_meal_type;
				if(this.newObj.pic != this.optionRoomData.pic) postData.pic = this.newObj.pic;
				if(this.newObj.marked_words != this.optionRoomData.marked_words) postData.marked_words = this.newObj.marked_words;
				if(Object.keys(postData).length == 0) {
					return uni.showToast({
						title: '房间信息没有修改', icon: 'none', duration: 3000
					});
				}
				postData.token = this.newObj.token;
				postData.rid = this.newObj.rid;
				updateTeaRoomInfo(postData).then(res => {
					console.log(33, res);
					// this.newObj.name = '';
					// this.newObj.hour = '';
					// this.newObj.people_count = '';
					// this.newObj.price = '';
					// this.newObj.vip_price = '';
					// this.newObj.sort = '';
					// this.newObj.labels = '';
					// this.newObj.wifi = '';
					// this.newObj.remarks = '';
					uni.showModal({
						title: '提示', content: '修改房间成功', confirmColor: '#99c043',
						showCancel: false, confirmText: '返回房间列表',
						success:res1 => {
							if (res1.confirm) {
								// uni.reLaunch({ url: '/pages/index/roomList' })
								uni.navigateBack({ delta: 2 });
							}
						}
					})
				})
			}
		},
		getContents(html){
			this.newObj.remarks = html
		},
	}
}
</script>
<style>
</style>